<!DOCTYPE html> 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  <meta http-equiv="Cache-Control" content="no-transform,no-cache" />
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <title>气泡 三角</title>
<style type="text/css">
.toast-container {
    position: relative;
    top: -58px;
    left: 195px;
    display: none;
    text-align: center;
    color: #9a2323;
    background: white;
    border-radius: 11px;
    border: 1px solid #ece1e1;
    line-height: 28px;
    padding: 10px 20px 10px 20px;
    display: inline-block;
}
.toast-container>em {
    display: block;
    border-width: 5px;
    position: absolute;
    bottom: -10px;
    left: 44%;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
    font-size: 0;
    line-height: 0;
}
</style>
</head>
<body style="background-color: #dcc9c9;">
<div style="width:300px;height:200px;position:relative;background-color:gray;
margin-top:100px;margin-left:50px;">

<div class="toast-container"><em></em>提示Toast信息</div>

</div>
</body>
</html>